<template>
	<!-- 保洁详情 -->
	<view class="cleaner" :class="{appshow:!appshow}">
		<scroll-view scroll-y @scroll="scrolltoupper($event)" class="scroll">
			<view class="header">
				<view class="bg" :style="{ opacity: opacity }"><view class="title">保洁详情</view></view>
				<image class="nav" :src="nav" @tap="navigateBack"></image>
				<image class="heart" v-if="heartShow == 1" :src="heart" @tap="follow(data.id)"></image>
				<image class="heart" v-if="heartShow == 2" src="/static/icon/heart-red.png"></image>
				<image class="more" v-if="moreShow" :src="more" @tap="more_"></image>
				<image class="back" src="/static/bg/bjbg.png"></image>
				<view class="box">
					<view class="avatar">
						<image class="avatar_img" 
						:src="data.account_info.head_images||'/static/bg/img.png'"></image>
						<view class="icon"><image src="/static/personal-center/lv.png"></image></view>
					</view>
					<view class="content">
						<view class="title">{{ data.name }}</view>
						<view class="text">{{ data.account_info.say }}</view>
					</view>
				</view>
				<view class="items">
					<view class="item">
						<view>实名认证</view>
						<view style="color: #999;">{{ data.user_auth == 1 ? '已认证' : '未认证' }}</view>
					</view>
					<view class="item">
						<view>常驻地址</view>
						<view class="text">{{ data.address || '暂无信息' }}</view>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="title" @tap="navigateTo">
					<view>用户评价({{ data.cleaner_comments.length || 0 }})</view>
					<view class="text" @tap="navigateTo">
						<view>查看全部评价</view>
						<image class="img" src="/static/personal-center/right.png" mode=""></image>
					</view>
				</view>
				<view class="show" v-if="!(data.cleaner_comments.length > 0)">
					<image src="/static/bg/pingjia.png"></image>
				</view>
				<view class="main_items" v-for="(item, index) in data.cleaner_comments" :key="index" v-if="data.cleaner_comments.length >= 1">
					<view class="head">
						<view class="head_l">
							<view class="img">
								<image :src="item.hotel_info.founder_account.head_images||'/static/bg/img.png'"></image>
							</view>
							<view class="head_box">
								<view class="name">{{ item.hotel_info.founder_account.username }}</view>
								<view class="time">{{ item.create_time }}</view>
							</view>
						</view>
						<view class="head_r">
							<uni-rate max="5" size="16" :value="item.clean_grade" disabled="true"></uni-rate>
						</view>
					</view>
					<view class="center">{{ item.content }}</view>
					<view class="foot" v-if="item.image">
						<image v-for="(k, i) in item.image" :key="i" :src="k + '?imageView2/1/w/888/h/664'"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<jc-popUp position="bottom" ref="pop" :flag="flag" markTapHide="true">
			<view class="footer">
				<view class="item">确定拉黑该保洁?</view>
				<view class="item" @tap="total(1)">确定</view>
				<view class="item" @tap="total(0)">取消</view>
			</view>
		</jc-popUp>
	</view>
</template>

<script>
import moment from 'moment';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import jcPopUp from '@/components/jc-popUp/jc-popUp.vue';
export default {
	data() {
		return {
			appshow:false,
			data: {},
			opacity: 0,
			id: '',
			heartShow: 3,
			moreShow: true,
			nav: '/static/icon/white-back.png',
			heart: '/static/icon/heart-white-s.png',
			more: '/static/icon/more-fff.png'
		};
	},
	components: {
		jcPopUp,uniRate
	},
	onLoad(e) {
		uni.showLoading({
			title: '加载中',
			mask:true
		});
		this.id = e.id;
		this.cleanerData();
	},
	methods: {
		async cleanerData(){
			let [_cleaner,cleaner] =  await this.cleaner(this.id)
			if(_cleaner || cleaner.data.status == 0){
				this.showToast('获取失败，请重试');	
				return;
			}
			this.data = cleaner.data.data;
			if (this.data.listset_info) {
				if (this.data.listset_info.is_follow == 1) {
					this.heartShow = 2;
				} else {
					this.heartShow = 1;
				}
			}
			this.data.cleaner_comments.forEach(v => {
				v.create_time = moment(v.create_time * 1000).format('YYYY-MM-DD HH:mm');
				if (v.image) {
					v.image = JSON.parse(v.image);
				}
				if (!this.isLogin().hotel_id) {
					this.moreShow = false;
					this.heartShow = 3;
				}
			})
			this.appshow = true;
			uni.hideLoading();
		},
		cleaner(id){
			return this.getReq({
				url: 'user/cleaner',
				method: 'get',
				id: id,
				data: {
					uid:this.isLogin().id,
					show_cleaner_comment: true
				}
			})
		},
		scrolltoupper(e) {
			/**
			 * 上拉显示顶部
			 */
			console.log(e.detail.scrollTop);
			this.opacity = e.detail.scrollTop / 20;
			if (this.opacity >= 0.5) {
				this.heart = '/static/icon/heart-333-h.png';
				this.nav = '/static/login/back.png';
				this.more = '/static/icon/more-333.png';
			} else {
				this.heart = '/static/icon/heart-white-h.png';
				this.nav = '/static/icon/white-back.png';
				this.more = '/static/icon/more-fff.png';
			}
		},
		navigateBack() {
			/**
			 * 后退一页
			 */
			uni.navigateBack();
		},
		navigateTo() {
			/**
			 * 保洁 评价详情
			 */
			uni.navigateTo({
				url: '/pages/hotel/cleaner/comment?id=' + this.id
			});
		},
		listSetupFollow(id) {
			/**
			 * 关注
			 */
			return new Promise(res => {
				this.req(
					{
						url: 'both/listSetup',
						method: 'POST',
						data: {
							host_id: this.isLogin().hotel_id,
							guest_id: id,
							setup_type: 1,
							app_type: 2
						}
					},
					data => {
						res(data.data);
					}
				);
			});
		},
		listSetupFollow_(id) {
			/**
			 * 取消关注
			 */
			return new Promise(res => {
				this.req(
					{
						url: 'both/listSetup',
						id: this.isLogin().hotel_id,
						method: 'DELETE',
						data: {
							guest_id: id,
							setup_type: 1,
							app_type: 2
						}
					},
					data => {
						res(data.data);
					}
				);
			});
		},
		more_() {
			this.$refs.pop.show();
		},
		async total(e) {
			/**
			 * 拉黑
			 */
			if (!e) {
				this.$refs.pop.hide();
				return;
			}
			this.getReq({
				url: 'both/listSetup',
				method: 'post',
				data: {
					host_id: this.isLogin().hotel_id,
					guest_id: this.id,
					setup_type: 2,
					app_type: 2
				}
			}).then(v => {
				console.log(v);
				if (v[1].data.status == 1) {
					this.showToast(v[1].data.title);
					this.$refs.pop.hide();
				} else {
					this.showToast(v[1].data.message);
					this.$refs.pop.hide();
				}
			});
		},
		async follow(id) {
			/**
			 * 关注/取消关注 按钮
			 */
			if (this.heartShow == 1) {
				let res = await this.listSetupFollow(id);
				if (res.status == 1) {
					this.showToast('关注成功');
					this.heartShow = 2;
				} else {
					this.showToast(res.message);
				}
				return;
			}
			if (this.heartShow == 2) {
				let res = await this.listSetupFollow_(id);
				if (res.status == 1) {
					this.showToast('取消关注成功');
					this.heartShow = 1;
				} else {
					this.showToast(res.message);
				}
				return;
			}	
		}
	},
	components:{
		uniRate
	}
};
</script>

<style scoped lang="scss">
.appshow{
	display: none;
}
.cleaner {
	width: 750upx;
	height: 496upx;
	color: #333333;
	.scroll {
		width: 750upx;
		height: 100vh;
		.header {
			width: 750upx;
			height: 692upx;
			border-bottom: 10upx solid #e5e5e5;
			position: relative;
			.nav {
				position: fixed;
				width: 32upx;
				height: 32upx;
				left: 27upx;
				/* #ifdef APP-PLUS */
				top: 67upx;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				top: 167upx;
				/* #endif */
				z-index: 99999;
			}
			.heart {
				position: fixed;
				width: 36upx;
				height: 36upx;
				right: 104upx;
				/* #ifdef APP-PLUS */
				top: 64upx;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				top: 164upx;
				/* #endif */
				z-index: 99999;
			}
			.more {
				position: fixed;
				width: 38upx;
				height: 38upx;
				right: 24upx;
				/* #ifdef APP-PLUS */
				top: 62upx;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				top: 162upx;
				/* #endif */
				z-index: 99999;
			}
			.bg {
				width: 750upx;
				height: 126upx;
				background-color: #fff;
				position: fixed;
				color: #333;
				z-index: 99;
				top: 0;
				left: 0;
				border-bottom: 1upx solid #e5e5e5;
				.title {
					position: absolute;
					left: calc(50% - 72upx);
					top: 63upx;
					font-size: 36upx;
					color: #333;
				}
			}
			.back {
				width: 750upx;
				height: 340upx;
			}
			.box {
				position: absolute;
				left: 75upx;
				top: 230upx;
				width: 600upx;
				height: 230upx;
				background-color: #ffffff;
				box-shadow: 0px 2upx 38upx 0px rgba(53, 149, 249, 0.19);
				border-radius: 8upx;
				.avatar {
					position: absolute;
					left: 220upx;
					top: -80upx;
					.avatar_img {
						width: 160upx;
						height: 160upx;
						border-radius: 50%;
						box-shadow: 0upx 4upx 32upx 0upx rgba(53, 149, 249, 0.28);
					}
					.icon {
						position: absolute;
						bottom: 6upx;
						right: 2upx;
						width: 40upx;
						height: 40upx;
						background-color: #ffffff;
						border-radius: 50%;
						box-shadow: 0px 4upx 32upx 0px rgba(53, 149, 249, 0.28);
						display: flex;
						align-items: center;
						justify-content: center;
						image {
							width: 25upx;
							height: 19upx;
						}
					}
				}
				.content {
					position: absolute;
					left: 0;
					top: 80upx;
					width: 100%;
					height: 198upx;
					text-align: center;
					.title {
						font-size: 32upx;
						line-height: 84upx;
					}
					.text {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						text-align: end;
						width: 450upx;
						margin: 0 auto;
						font-size: 24upx;
						line-height: 24upx;
						color: #999;
						text-align: center;
					}
				}
			}
			.items {
				position: absolute;
				left: 0;
				top: 460upx;
				width: 702upx;
				padding: 0 24upx;
				.item:nth-child(1) {
					border-bottom: 1upx solid #e5e5e5;
				}
				.item {
					height: 120upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28upx;
					.text {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 70%;
						text-align: end;
						color: #999;
					}
				}
			}
		}
		.main {
			padding: 0 24upx;
			width: 702upx;
			.title {
				height: 78upx;
				font-size: 32upx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.text {
					font-size: 24upx;
					color: #999;
					display: flex;
					align-items: center;
					.img {
						width: 12upx;
						height: 22upx;
						line-height: 24upx;
						margin-left: 4upx;
						padding: 0;
					}
				}
			}
			.show {
				width: 345upx;
				height: 323upx;
				margin: 30upx auto;
				image{
					width: 345upx;
					height: 323upx;
				}
			}
			.main_items:nth-last-child(1) {
				border-bottom: none;
			}
			.main_items {
				width: 100%;
				border-bottom: 1upx solid #e5e5e5;
				.head {
					width: 100%;
					height: 140upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.head_l {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.img {
							width: 80upx;
							height: 80upx;
							margin-right: 22upx;
							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.head_box {
							font-size: 28upx;
							.time {
								font-size: 24upx;
								color: #999999;
							}
						}
					}
					.head_r {
						image {
							width: 22upx;
							height: 22upx;
							margin-left: 4upx;
						}
					}
				}
				.center {
					font-size: 28upx;
					line-height: 44upx;
					padding-bottom: 30upx;
					width: 700upx;
					display:block;
					word-break: break-all;
					word-wrap: break-word;
				}
				.foot {
					padding-bottom: 30upx;
					width: 100%;
					image:nth-child(3n) {
						margin-right: 0upx;
					}
					image {
						width: 222upx;
						height: 166upx;
						background-color: #3595f9;
						border-radius: 8upx;
						margin-right: 16upx;
					}
				}
			}
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		height: 320upx;
		background-color: #ffffff;
		.item:nth-child(1) {
			font-size: 24upx;
			color: #999999;
			border-bottom: 1upx solid #e5e5e5;
		}
		.item:nth-child(2) {
			border-bottom: 19upx solid #e5e5e5;
		}
		.item {
			height: 100upx;
			line-height: 100upx;
			font-size: 28upx;
			text-align: center;
		}
	}
}
</style>
